<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
  
	<!-- <div> Jack </div> -->

	<style>
		
		/* : 伪类：状态
			:: 伪元素，不是真正的元素，但是又像元素

			伪元素是  行内元素！！！
				可以在伪元素中添加我们所学的所有CSS样式
		*/



		div::before {
			/* 设置伪元素的内容 */
			content: "Jack";

			color: red;
			
			/* 转换为块状元素 */
			display: block;

			height: 100px;
			border: 1px solid red;
		}

		div::after {
			display: block;
			border: 1px solid red;
			height: 300px;
			content: "真真帅！";
		}

/* 挑战： 文字后面可不可以加伪元素呢？ */
	</style>

	<div> 真帅！</div>



 </body>
</html>
